<template>
  <div class="editMonitor">
    <el-dialog title="修改筛分级配" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
      :before-close="doClose" top="0px" width="1200px">
      <div class="form-box">
        <table class="my-details">
          <tr>
            <td class="label">所属项目</td>
            <td class="text">{{ info.projectName }}</td>
            <td class="label">所属拌合站</td>
            <td class="text">{{ info.stationName }}</td>
          </tr>
          <tr>
            <td class="label">所属拌合楼</td>
            <td class="text">{{ info.stationName }}</td>
            <td class="label">生产时间</td>
            <td class="text"></td>
          </tr>
          <tr>
            <td class="label">级配类型</td>
            <td class="text">{{ info.matchType }}</td>
            <td class="label">配方名称</td>
            <td class="text">{{ info.matchName }}</td>
          </tr>
          <tr>
            <td class="label">配方编号</td>
            <td class="text">{{ info.matchCode }}</td>
          </tr>
          <tr>
            <td class="label">报警详情</td>
            <td class="text" colspan="3">{{ info.details }}</td>
          </tr>
        </table>

        <table class="my-details table2">
          <tr>
            <td class="label">油石比</td>
            <td class="label">温度</td>
            <td class="label" v-if="info.sieve0d075">0.075</td>
            <td class="label" v-if="info.sieve0d15">0.15</td>
            <td class="label" v-if="info.sieve0d3">0.3</td>
            <td class="label" v-if="info.sieve0d6">0.6</td>
            <td class="label" v-if="info.sieve1d18">1.18</td>
            <td class="label" v-if="info.sieve2d36">2.36</td>
            <td class="label" v-if="info.sieve4d75">4.75</td>
            <td class="label" v-if="info.sieve9d5">9.5</td>
            <td class="label" v-if="info.sieve13d2">13.2</td>
            <td class="label" v-if="info.sieve16">16</td>
            <td class="label" v-if="info.sieve19">19</td>
            <td class="label" v-if="info.sieve26d5">26.5</td>
            <td class="label" v-if="info.sieve31d5">31.5</td>
            <td class="label" v-if="info.sieve37d5">37.5</td>
            <td class="label" v-if="info.sieve53">53</td>
          </tr>
          <tr>
            <td class="text">
              <span :class="{ error: 0 != info.asphaltAggregateRatioAlarm }">{{ info.asphaltAggregateRatioAct }}</span>
            </td>
            <td class="text">
              <span :class="{ error: 0 != info.temperatureAlarm }">{{ info.dischargeTemperature }}</span>
            </td>
            <td class="text" v-if="info.sieve0d075">
              <span :class="{ error: 0 != info.sieve0d075Alarm }">{{ info.sieve0d075 }}</span>
            </td>
            <td class="text" v-if="info.sieve0d15">
              <span :class="{ error: 0 != info.sieve0d15Alarm }">{{ info.sieve0d15 }}</span>
            </td>
            <td class="text" v-if="info.sieve0d3">
              <span :class="{ error: 0 != info.sieve0d3Alarm }">{{ info.sieve0d3 }}</span>
            </td>
            <td class="text" v-if="info.sieve0d6">
              <span :class="{ error: 0 != info.sieve0d6Alarm }">{{ info.sieve0d6 }}</span>
            </td>
            <td class="text" v-if="info.sieve1d18">
              <span :class="{ error: 0 != info.sieve1d18Alarm }">{{ info.sieve1d18 }}</span>
            </td>
            <td class="text" v-if="info.sieve2d36">
              <span :class="{ error: 0 != info.sieve2d36Alarm }">{{ info.sieve2d36 }}</span>
            </td>
            <td class="text" v-if="info.sieve4d75">
              <span :class="{ error: 0 != info.sieve4d75Alarm }">{{ info.sieve4d75 }}</span>
            </td>
            <td class="text" v-if="info.sieve9d5">
              <span :class="{ error: 0 != info.sieve9d5Alarm }">{{ info.sieve9d5 }}</span>
            </td>
            <td class="text" v-if="info.sieve13d2">
              <span :class="{ error: 0 != info.sieve13d2Alarm }">{{ info.sieve13d2 }}</span>
            </td>
            <td class="text" v-if="info.sieve16">
              <span :class="{ error: 0 != info.sieve16Alarm }">{{ info.sieve16 }}</span>
            </td>
            <td class="text" v-if="info.sieve19">
              <span :class="{ error: 0 != info.sieve19Alarm }">{{ info.sieve19 }}</span>
            </td>
            <td class="text" v-if="info.sieve26d5">
              <span :class="{ error: 0 != info.sieve26d5Alarm }">{{ info.sieve26d5 }}</span>
            </td>
            <td class="text" v-if="info.sieve31d5">
              <span :class="{ error: 0 != info.sieve31d5Alarm }">{{ info.sieve31d5 }}</span>
            </td>
            <td class="text" v-if="info.sieve37d5">
              <span :class="{ error: 0 != info.sieve37d5Alarm }">{{ info.sieve37d5 }}</span>
            </td>
            <td class="text" v-if="info.sieve53">
              <span :class="{ error: 0 != info.sieve53Alarm }">{{ info.sieve53 }}</span>
            </td>
          </tr>
        </table>

        <el-form ref="editForm" :model="form" :rules="rules" label-width="100px" size="small" v-loading="loading">
          <el-form-item label="问题原因" prop="alarmReason">
            <el-input type="textarea" maxlength="100" v-model="form.alarmReason" placeholder="问题原因"></el-input>
          </el-form-item>
          <el-form-item label="处理方案" prop="handlerPlan">
            <el-input type="textarea" maxlength="100" v-model="form.handlerPlan" placeholder="处理方案"></el-input>
          </el-form-item>
          <el-form-item label="处理结果" prop="handlerResult">
            <el-input type="textarea" maxlength="100" v-model="form.handlerResult" placeholder="处理结果"></el-input>
          </el-form-item>
          <el-form-item label="处理人" prop="handlerPerson">
            <el-input type="textarea" maxlength="100" v-model="form.handlerPerson" placeholder="处理人"></el-input>
          </el-form-item>
          <el-form-item label="处理时间" prop="handlerTime">
            <el-date-picker v-model="form.handlerTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime" :picker-options="pickerOptions" placeholder="处理时间"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button size="mini" @click="doClose">取消</el-button>
        <el-button type="primary" size="mini" @click="doSubmit" :loading="submitting">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateHandler,
  getHandler
} from "@/api/bitumenMixingStation/productionQuality/qualityMonitor";
export default {
  name: 'editMonitor',
  data() {
    return {
      visible: false,
      isAdd: false,
      loading: false,
      submitting: false,
      rules: {
        alarmReason: [{ required: true, message: '请填写问题原因', trigger: 'change' }],
        handlerPlan: [{ required: true, message: '请填写处理方案', trigger: 'change' }],
        handlerResult: [{ required: true, message: '请填写处理结果', trigger: 'change' }],
        handlerPerson: [{ required: true, message: '请填写处理人', trigger: 'change' }],
        handlerTime: [{ required: true, message: '请填写处理时间', trigger: 'change' }]
      },
      form: {},
      info: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //选择时间范围
        }
      }
    };
  },
  mounted() { },
  methods: {
    init(id) {
      this.visible = true;
      this.loading = true;
      this.submitting = false;
      getHandler(id)
        .then((res) => {
          if (res.data) {
            this.info = res.data;
            this.form = {
              id: id,
              alarmReason: res.data.alarmReason,
              handlerPlan: res.data.handlerPlan,
              handlerResult: res.data.handlerResult,
              handlerPerson: res.data.handlerPerson,
              handlerTime: res.data.handlerTime
            };
          }
          this.$nextTick(() => {
            this.$refs['editForm'].clearValidate();
            this.loading = false;
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 关闭弹窗
     */
    doClose() {
      this.visible = false;
    },

    /**
     * 表单提交
     */
    doSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.submitting = true;
          updateHandler(this.form)
            .then((res) => {
              this.submitting = false;
              this.$message.success('操作成功');
              this.doClose();
              this.$emit('success');
            })
            .catch(() => {
              this.submitting = false;
            });
        }
      });
    },

    /**
     * 切换标题
     */
    renderHeader(h, { column, $index }) {
      let property = column.property + 'Name';
      let label = this.currentMatch[property];
      if (!label) {
        label = column.label;
      }
      return h('div', {
        attrs: {
          class: 'cell'
        },
        domProps: {
          innerHTML: label
        }
      });
    },
   
  }
};
</script>

<style lang="scss" scoped>
.editMonitor {
  .my-details {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
  }

  .my-details td {
    border: 1px solid #E4EFFE;
    padding: 12px 10px;
  }

  .my-details .label {
    background: #F4F9FF;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }

  .my-details .label .text {
    color: #000000;
  }

  .my-details {
    margin-bottom: 20px;
  }

  .my-details .label {
    width: 100px;
  }

  .my-details .text .error {
    color: #ff0000;
  }

  .my-details.table2 .label,
  .my-details.table2 .text {
    text-align: center;
  }
}</style>